// import counterStore from './store/modules/counter'
import { useStore } from './store'
import { observer } from 'mobx-react-lite'

import { useEffect } from 'react'

const App = observer(() => {
	const { counterStore } = useStore()
	useEffect(() => {
		counterStore.setChannelList()
	}, [counterStore])
	return (
		<>
			<div className="card">
				{counterStore.list.map(item => (
					<div key={item}>{item}</div>
				))}
				<div>---------------</div>
				{counterStore.filterList.map(item => (
					<div key={item}>{item}</div>
				))}
				<div>---------------</div>
				{counterStore.channelList.map(item => (
					<div key={item.id}>{item.name}</div>
				))}
				<button onClick={() => counterStore.addCount()}>count is {counterStore.count}</button>
				<button onClick={() => counterStore.changeList()}>changeList</button>
			</div>
		</>
	)
})

export default App
